@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant creme (&:where(.creme, .creme *));

@theme {
  --color-primary: var(--color-primary);
  --color-secondary: var(--color-secondary);
  --color-creme: #e2dcd0;
  --color-creme-dark-light: #d9d2c9;
  --color-creme-dark: #bcb6ae;
  --color-creme-light: #f2eae0;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
    html[data-theme="Green"] {
      --color-primary: #4ade80;
      --color-secondary: #3bb166;
    }

    html[data-theme="Blue"] {
      --color-primary: #4793cc;
      --color-secondary: #3875a3;
    }

    html[data-theme="Gray"] {
      --color-primary: #97aabd;
      --color-secondary: #788897;
    }

    html[data-theme="Red"] {
      --color-primary: #f87171;
      --color-secondary: #c65a5a;
    }

    html[data-theme="Pink"] {
      --color-primary: #da7b93;
      --color-secondary: #ae6275;
    }

    html[data-theme="Orange"] {
      --color-primary: #ffcb85;
      --color-secondary: #cca26a;
    }

    html[data-theme="Brown"] {
      --color-primary: #4c2518;
      --color-secondary: #3c1d13;
    }
}

h1 {
    @apply text-4xl font-bold mb-4
}
h2 {
    @apply text-xl font-bold mb-2
}
p {
    @apply mb-4
}
hr {
    @apply mt-6 mb-6
}
.button, button, [type='submit'], [type='button'] {
    @apply bg-primary text-white font-bold px-4 py-3 inline-block
    rounded-lg transition-all cursor-pointer
}
.button:hover, button:hover, [type='submit']:hover, [type='button']:hover {
    @apply bg-secondary
}
.button:active, button:active, [type='submit']:active, [type='button']:active {
    @apply scale-95
}
.button.alert, button.alert {
    @apply bg-red-700
}
.button.alert:hover, button.alert:hover {
    @apply bg-red-600
}
.highlight {
    @apply bg-indigo-100!;
}
.helptext {
    @apply text-gray-500! text-sm!;
}
label {
    @apply hidden
}
input[type=file] {
    @apply  w-full text-gray-400 dark:text-slate-200 bg-gray-100 dark:bg-slate-700 creme:text-stone-700 creme:bg-creme-light file:cursor-pointer
    cursor-pointer file:border-0 file:py-3 file:px-4 file:-my-7 file:-ml-5 file:mr-4 file:bg-primary
    file:hover:bg-secondary file:text-white file:font-bold file:rounded-lg
}
input[type=checkbox] {
    @apply  accent-primary
}
select {
    @apply rounded-sm px-2
}
.textarea, textarea, input {
    @apply w-full rounded-lg py-3 px-5 bg-gray-100 dark:bg-slate-700 creme:bg-creme-dark-light creme:text-stone-700
}
.textarea:focus, textarea:focus, input:focus {
    @apply outline outline-1 outline-primary
}
.errorlist li {
    @apply p-1 pl-4 border-l-red-500 border-l-4 border-solid mb-2 text-red-500
}
label[for="id_remember"] {
    @apply inline-block w-auto mr-2
}
input[name="remember"] {
    @apply w-auto
}
.alert-info { @apply bg-secondary }
.alert-success { @apply bg-secondary }
.alert-warning { @apply bg-red-500 }
.alert-danger { @apply bg-red-500 }
form[action="/accountsignup/"] ul {
    @apply hidden
}
form[action="/accountsignup/"] ul.errorlist {
    @apply block
}
form[action="/accountpassword/change/"] ul {
    @apply hidden
}
form[action="/accountpassword/change/"] ul.errorlist {
    @apply block
}
.allauth .helptext {
    @apply block mt-4
}

.allauth content a:hover {
    @apply text-primary
}

.markdown {
    & p,
    & ol,
    & ul,
    & span,
    & pre,
    & blockquote,
    & a {
        @apply text-sm
    }

    &>ul, &>ol {
        @apply pb-2
    }

    & ol {
        @apply list-decimal ml-4 pt-1
    }

    & ul {
        @apply list-disc ml-4
    }

    & p {
        @apply mb-3!
    }

    & h1, h2 {
        @apply mb-5
    }

    & h3, h4 {
        @apply mb-3
    }

    & a {
        @apply text-primary
    }

    & a:hover {
        @apply underline
    }

    & pre {
        @apply pl-3 my-3 py-2 mt-1 mb-2 bg-slate-200 dark:bg-slate-600 creme:bg-creme-dark-light
    }

    & pre code {
        @apply bg-slate-200 dark:bg-slate-600 creme:bg-creme-dark-light
    }

    & code {
        @apply bg-slate-200 dark:bg-slate-600 creme:bg-creme-dark-light px-1 pt-1
    }

    & blockquote {
        @apply border-l-2 border-primary pl-4 pt-3 pb-1 mb-2 rounded-r bg-slate-200 dark:bg-slate-600 creme:bg-creme-dark-light
    }
}
